<template>
  <div id="creatProduct">
    <div class="steps">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="商品信息"></el-step>
        <el-step title="商品详情"></el-step>
        <el-step title="其他设置"></el-step>
      </el-steps>
    </div>
    <!-- 页面主体表单内容 -->
    <div class="from" v-show="active == 0">
      <el-form ref="form" label-width="80px">
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="商品名称：">
                <el-input v-model="product.storeName" :disabled="type"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="商品分类：">
                <el-cascader
                  v-model="options.value"
                  :options="options"
                  :show-all-levels="false"
                  clearable
                  :props="{ multiple: true }"
                  filterable
                  :disabled="type"
                ></el-cascader>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="商品关键字：">
                <el-input v-model="product.keyword" :disabled="type"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="单位：">
                <el-input v-model="product.unitName" :disabled="type"></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="商品简介：">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 4 }"
                  v-model="product.storeInfo"
                  :disabled="type"
                ></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              <el-form-item label="商品封面图：">
                <div>
                  <img :src="product.image" alt="" class="img" />
                </div>
              </el-form-item></div
          ></el-col>
        </el-row>
        <el-form-item label="商品轮播图：">
          <div>
            <div
              v-for="(item, index) in product.sliderImage"
              :key="index"
              style="display: inline-block; position: relative"
            >
              <img :src="item" alt="" class="img" />
              <div class="close" v-show="!type" @click="delsliderImage(index)">×</div>
            </div>

            <div style="display: inline-block" v-show="!type">
              <!-- 模态框 -->
              <el-mydialog @send="sliderImage"></el-mydialog>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="运费模板：">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- <el-button v-show="!type">运费模板</el-button> -->
          <el-yunfei v-show="!type" @send="update"></el-yunfei>
        </el-form-item>
        <el-form-item label="运费模板：">
          <el-radio v-model="radio" label="1" :disabled="type">单规格</el-radio>
          <el-radio v-model="radio" label="2" :disabled="type">多规格</el-radio>
        </el-form-item>
        <el-form-item label="佣金设置：">
          <el-radio v-model="radio1" label="1" :disabled="type">单独设置</el-radio>
          <el-radio v-model="radio1" label="2" :disabled="type">默认设置</el-radio>
        </el-form-item>
      </el-form>
      <div class="table">
        <el-table border :data="product.attrValue">
          <el-table-column label="图片" width="115" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.image" alt="" class="img1" />
            </template>
          </el-table-column>
          <el-table-column label="售价" width="164" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.price"
                size="small"
                :disabled="type"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="成本价" width="164" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cost" size="small" :disabled="type"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="原价" width="164" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.otPrice"
                size="small"
                :disabled="type"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="库存" width="164" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.stock"
                size="small"
                :disabled="type"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="商品编号" width="164" align="center">
            <template slot-scope="scope">
              <el-input size="small" :disabled="type"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="重量(KG)" width="164" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.weight"
                size="small"
                :disabled="type"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="体积(m³)" width="164" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.volume"
                size="small"
                :disabled="type"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
        <div class="btn">
          <el-button type="primary" @click="Btnnext">下一步</el-button>
          <el-button type="primary" v-show="!type">提交</el-button>
        </div>
      </div>
    </div>
    <!-- 第二页 -->
    <div class="second" v-show="active == 1">
      <div class="box">
        <div>商品详情:</div>
        <div>
          <div v-html="product.content"></div>
        </div>
      </div>
      <div class="btn2">
        <el-button @click="back">上一步</el-button>
        <el-button type="primary" @click="Btnnext">下一步</el-button>
      </div>
    </div>
    <!-- 第三页 -->
    <div class="thirdly" v-show="active == 2">
      <div class="inputNumber">
        <div class="top">
          <div>
            <span>排序：</span>
            <el-input-number
              v-model="product.sort"
              @change="handleChange"
              label="描述文字"
              size="medium"
              :disabled="type"
            ></el-input-number>
          </div>
          <div>
            <span>积分：</span>
            <el-input-number
              v-model="product.giveIntegral"
              @change="handleChange"
              label="描述文字"
              size="medium"
              :disabled="type"
            ></el-input-number>
          </div>
          <div>
            <span>销量：</span>
            <el-input-number
              v-model="product.ficti"
              @change="handleChange"
              label="描述文字"
              size="medium"
              :disabled="type"
            ></el-input-number>
          </div>
        </div>
        <div class="recommend">
          <span>商品推荐：</span>
        </div>
        <div class="hd">
          <span>活动优先级：</span>
          <div>
            <div v-for="(item, index) in product.activity" :key="index">
              <div>{{ item }}</div>
            </div>
          </div>
        </div>
        <div class="discount">
          <span>优惠券：</span>
        </div>
        <div class="btn3">
          <el-button @click="back">上一步</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入axios请求
import { productInfo, shippingList } from "@/network/api/store/index";
import { treeList } from "@/network/api/store/sort";
// 模态框
const dialog = () => import("@/components/store/index/Dialog.vue");
// 运费模板
const yunfei = () => import("@/components/store/index/yunfeiModel.vue");

export default {
  async created() {
    console.log(this.$route.params);
    let { id, type } = this.$route.params;
    if (type) {
      this.type = true;
    }

    let PromiseAll = Promise.all([productInfo(id), treeList(-1), shippingList()]);
    let values = await PromiseAll;
    // 商品详细信息
    values[0].data.data.sliderImage = JSON.parse(values[0].data.data.sliderImage);
    this.product = values[0].data.data;
    let list = this.dataMethods(values[1].data.data);
    this.options = [...list];
    let shipList = this.shippList(values[2].data.data.list);
    console.log("shipList", shipList);
    this.options1 = [...shipList];
    this.value = this.options1[0].value;
  },
  data() {
    return {
      isShow: true,

      type: false,
      product: {}, //商品详细信息
      active: 0,

      //   select选择器
      options: [
        {
          value: "HTML",
          label: "HTML",
          children: [
            {
              value: "CSS",
              label: "CSS",
            },
          ],
        },
      ],
      value: [],
      //   运费模板
      options1: [],
      //   商品规格
      radio: "1",
      //   佣金设置
      radio1: "2",
      centerDialogVisible: false,
      dialogVisible: false, //模态框弹出
    };
  },

  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    // 数据处理
    dataMethods(value) {
      let arr = [];
      value.forEach((item) => {
        let obj = {
          value: item.id,
          label: item.name,
        };
        if (item.child && item.child.length != 0) {
          obj.children = this.dataMethods(item.child);
        }
        arr.push(obj);
      });
      return arr;
    },
    // 下一步
    Btnnext() {
      this.active = this.active + 1;
    },
    // 上一步
    back() {
      this.active = this.active - 1;
    },
    handleChange() {},
    // 模态框弹出
    show() {
      console.log(1233);
      this.dialogVisible = true;
    },
    // 增加轮播图数量
    sliderImage(value) {
      let { product } = this.$data;
      product.sliderImage = [...product.sliderImage, ...value];
      // console.log("父组件方法执行", value, 123);
    },
    // 删除轮播图
    delsliderImage(index) {
      let { product } = this.$data;
      product.sliderImage.splice(index, 1);
    },
    // 模板列表数据处理函数
    shippList(data) {
      let arr = [];
      data.forEach((item) => {
        let obj = {
          label: item.name,
          value: item.id,
        };
        arr.push(obj);
      });
      return arr;
    },
    update(val) {
      let shipList = this.shippList(val);

      this.options1 = [...shipList];
    },
  },
  components: {
    "el-mydialog": dialog,
    "el-yunfei": yunfei,
  },
};
</script>

<style lang="scss">
#creatProduct {
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  .steps {
    padding: 20px;
    border-bottom: 1px solid #e6ebf5;
  }
  //   页面主体表单样式
  .from {
    padding: 40px 20px 20px 20px;
    .img {
      width: 58px;
      height: 58px;
      margin-right: 10px;
    }
    .img1 {
      width: 38px;
      height: 38px;
    }
  }
  .table {
    padding-left: 120px;
  }
  .btn,
  .btn2 {
    padding-top: 20px;
    text-align: start;
    button {
      margin: 0 15px 0 0;
    }
  }
  .btn2 {
    margin-top: 20px;
    padding-left: 75px;
  }
  .second {
    padding: 45px;
    .box {
      display: flex;
      > div {
        // display: inline-block;
        margin-right: 15px;
        font-weight: 700;
        font-size: 14px;
      }
    }
  }
  .thirdly {
    padding-top: 40px;
    .inputNumber {
      padding: 0 150px;
      > div {
        margin: 20px;
      }
      .top {
        display: flex;
        justify-content: space-between;
        div {
          display: inline-block;
        }
      }
      .recommend {
        text-align: start;
      }
      .hd {
        text-align: start;
        > div {
          display: inline-block;
          > div {
            display: inline-block;
            width: 48px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 12px;
            margin: 0 5px;

            &:first-child {
              background: red;
              color: #fff;
            }
            &:nth-of-type(2) {
              background: #1e9fff;
              color: #fff;
            }
            &:nth-of-type(3) {
              background: #009688;
              color: #fff;
            }
            &:nth-of-type(4) {
              background: #feb900;
              color: #fff;
            }
          }
        }
      }
      .discount {
        text-align: start;
      }
      .btn3 {
        text-align: start;
      }
    }
  }
}

// input框样式
#creatProduct {
  //   .el-input__inner {
  //     width: 550px !important;
  //   }
  .el-main[data-v-23543608] {
    text-align: none !important;
  }
  .el-form-item__label {
    width: 120px !important;
    font-weight: 700;
  }

  .el-textarea {
    width: 550px;
    textarea {
      font-size: 12px;
    }
  }
  .el-button {
    margin-left: 20px !important;
    position: relative;
    top: -1px;
  }
  .el-button--default {
    position: relative;
    top: -43px;
    left: 260px;
  }
  .el-form-item {
    text-align: start !important;
  }
  td {
    input {
      height: 30px;
      position: relative;
      top: 0px;
    }
  }
}

// el-row组件布局样式
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  .el-input {
    width: 550px;
    input {
      font-size: 12px;
    }
  }
}
.bg-purple-dark {
}
.bg-purple {
}
.bg-purple-light {
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.cameraIconfont {
  position: relative;
  top: -23px;
  background: #fafafa;
  text-align: center;
  line-height: 58px;
  border: 1px solid #aaa;
  border-radius: 5px;
  cursor: pointer;
}

.close {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #aaa;
  text-align: center;
  line-height: 10px;
  position: absolute;
  font-size: 10px;
  top: 0;
  right: 12px;
  cursor: pointer;
}
</style>
